<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>ES6模块化与Webpack入门 | XC's Blog</title><meta name="keywords" content="Vue前置基础"><meta name="author" content="XC's Blog"><meta name="copyright" content="XC's Blog"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="vue将每一个组件看作是一个独立的模块 (类似于nodejs中的) 模块化，而组件导入import和导出exports其实使用的是ES6新增的模块化语法 es6官网模块化语法：https:&#x2F;&#x2F;es6.ruanyifeng.com&#x2F;#docs&#x2F;module 谷歌浏览器测试ES6的模块化语法, 必须要使用live-server插件运行index才可以 1. ES6模块化默认导入导出12&lt;!--"><meta property="og:type" content="article"><meta property="og:title" content="ES6模块化与Webpack入门"><meta property="og:url" content="https://webxc.eu.org/post/fe15/index.html"><meta property="og:site_name" content="XC&#39;s Blog"><meta property="og:description" content="vue将每一个组件看作是一个独立的模块 (类似于nodejs中的) 模块化，而组件导入import和导出exports其实使用的是ES6新增的模块化语法 es6官网模块化语法：https:&#x2F;&#x2F;es6.ruanyifeng.com&#x2F;#docs&#x2F;module 谷歌浏览器测试ES6的模块化语法, 必须要使用live-server插件运行index才可以 1. ES6模块化默认导入导出12&lt;!--"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/webpack.jpg"><meta property="article:published_time" content="2023-06-22T02:30:00.000Z"><meta property="article:modified_time" content="2023-08-30T18:00:49.037Z"><meta property="article:author" content="XC&#39;s Blog"><meta property="article:tag" content="Vue前置基础"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/webpack.jpg"><link rel="shortcut icon" href="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><link rel="canonical" href="https://webxc.eu.org/post/fe15/"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://npm.elemecdn.com/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/@fancyapps/ui/dist/fancybox.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:{path:"/search.xml",preload:!1,languages:{hits_empty:"找不到您查询的内容：${query}"}},translate:void 0,noticeOutdate:void 0,highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:!1},copy:{success:"吾辈宣布,你的剪切板已被占领",error:"呀~复制失败,请在尝试下",noSupport:"对不起,你的浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:60,languages:{author:"作者: XC's Blog",link:"链接: ",source:"来源: XC's Blog",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"您已切换为繁体",cht_to_chs:"您已切换为简体",day_to_night:"您已切换为深色主题",night_to_day:"您已切换为浅色主题",bgLight:"#3b70fc",bgDark:"#121212",position:"bottom-center"},source:{justifiedGallery:{js:"https://npm.elemecdn.com/flickr-justified-gallery/dist/fjGallery.min.js",css:"https://npm.elemecdn.com/flickr-justified-gallery/dist/fjGallery.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"ES6模块化与Webpack入门",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2023-08-30 18:00:49"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const n=864e5*o,a={value:t,expiry:(new Date).getTime()+n};localStorage.setItem(e,JSON.stringify(a))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise(((t,o)=>{const n=document.createElement("script");n.src=e,n.async=!0,n.onerror=o,n.onload=n.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(n.onload=n.onreadystatechange=null,t())},document.head.appendChild(n)})),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme");"dark"===t?activateDarkMode():"light"===t&&activateLightMode();const o=saveToLocal.get("aside-status");void 0!==o&&("hide"===o?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="https://cdn1.tianli0.top/gh/web-xc/My-blog-CSS/mgi.css"><link rel="stylesheet" href="https://cdn1.tianli0.top/gh/web-xc/My-blog-CSS/mg111.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.16/css/mg2.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/styless.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/styles.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/font.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.15/css/font2.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiperstyle.css" media="print" onload='this.media="all"'><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">95</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-shouye"></i> <span>首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-shijian"></i> <span>时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian"></i> <span>标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw iconfont icon-fenlei"></i> <span>分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-lianxiwomen"></i> <span>友联</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-iconzhengli-"></i> <span>关于</span></a></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw iconfont icon-a-wangzhanchaojilianjiehulianwang"></i> <span>推荐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://www.inode.club/"><i class="fa-fw fa-sharp fa-solid fa-square-rss"></i> <span>程序员指南</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://ife.baidu.com/"><i class="fa-fw fa-brands fa-vuejs"></i> <span>前端技术学园</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yuque.com/tademanong/ag7q4n"><i class="fa-fw fa-solid fa-users"></i> <span>前端技术圈</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.code-nav.cn/"><i class="fa-fw fa-solid fa-shop"></i> <span>编程导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://q.shanyue.tech/"><i class="fa-fw fa-brands fa-square-js"></i> <span>每日一题</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://fanyouf.gitee.io/u1word/#/h5"><i class="fa-fw fa-solid fa-headphones"></i> <span>前端必会单词</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://site.51git.cn/render/gonav/4.html"><i class="fa-fw iconfont icon-wangzhandingzhi"></i> <span>网址导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.webxc.eu.org/music/"><i class="fa-fw iconfont icon-musical-note"></i> <span>音乐解锁</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url('https://cdn1.tianli0.top/gh/web-xc/iMG/postss/webpack.jpg')"><nav id="nav"><span id="blog_name"><div class="back-home-button" tabindex="-1"><i class="back-home-button-icon fas fa-grip-vertical"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">项目</div><div class="back-menu-list"><a class="back-menu-item" href="/" title="前往博客主页" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">主站</span></a><a class="back-menu-item" href="https://e.webxc.eu.org/" rel="external nofollow" title="前往学习笔记" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">学习笔记</span></a><a class="back-menu-item" href="https://v.webxc.eu.org/" rel="external nofollow" title="VuePress学习文档" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">VuePress文档</span></a><a class="back-menu-item" href="https://b.webxc.eu.org/" rel="external nofollow" title="旧站Hexo" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">旧站Hexo</span></a><a class="back-menu-item" href="https://gridea.webxc.eu.org/" rel="external nofollow" title="Gridea笔记" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Gridea笔记</span></a><a class="back-menu-item" href="https://c.webxc.eu.org/" rel="external nofollow" title="魔改Hexo" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">魔改Hexo</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">博客镜像</div><div class="back-menu-list"><a class="back-menu-item" href="https://blog.webxc.eu.org/" title="Vercel镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Vercel镜像</span></a><a class="back-menu-item" href="https://webxc.tk/" title="Netlify镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Netlify镜像</span></a><a class="back-menu-item" href="https://web-xc.gitee.io/" title="Gitee镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Gitee镜像</span></a><a class="back-menu-item" href="https://cf.webxc.eu.org/" title="Cloudflare镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Cloudflare镜像</span></a><a class="back-menu-item" href="https://render.webxc.eu.org/" title="Render镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Render镜像</span></a></div></div></div></div><a id="site-name" href="/"><div class="title">XC's Blog</div><i class="fa-solid fa-house"></i></a></span><div class="mask-name-container"><center id="name-container"><a id="page-name" href="javascript:btf.scrollToDest(0, 500)">PAGE_NAME</a></center></div><div id="menus"><div class="nav-button" id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i> <span>搜索</span></a></div><div class="nav-button" id="darkmode_navswitch"><a class="darkmode_switchbutton" type="button" title="浅色和深色模式转换" onclick="switchDarkMode()"><i class="fas fa-adjust"></i></a></div><div class="nav-button" id="nav-totop"><a class="totopbtn"><i class="fas fa-arrow-up"></i><span id="percent" onclick="btf.scrollToDest(0,500)">0</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-shouye"></i> <span>首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-shijian"></i> <span>时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian"></i> <span>标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw iconfont icon-fenlei"></i> <span>分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-lianxiwomen"></i> <span>友联</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-iconzhengli-"></i> <span>关于</span></a></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw iconfont icon-a-wangzhanchaojilianjiehulianwang"></i> <span>推荐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://www.inode.club/"><i class="fa-fw fa-sharp fa-solid fa-square-rss"></i> <span>程序员指南</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://ife.baidu.com/"><i class="fa-fw fa-brands fa-vuejs"></i> <span>前端技术学园</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yuque.com/tademanong/ag7q4n"><i class="fa-fw fa-solid fa-users"></i> <span>前端技术圈</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.code-nav.cn/"><i class="fa-fw fa-solid fa-shop"></i> <span>编程导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://q.shanyue.tech/"><i class="fa-fw fa-brands fa-square-js"></i> <span>每日一题</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://fanyouf.gitee.io/u1word/#/h5"><i class="fa-fw fa-solid fa-headphones"></i> <span>前端必会单词</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://site.51git.cn/render/gonav/4.html"><i class="fa-fw iconfont icon-wangzhandingzhi"></i> <span>网址导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.webxc.eu.org/music/"><i class="fa-fw iconfont icon-musical-note"></i> <span>音乐解锁</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">ES6模块化与Webpack入门</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-06-22T02:30:00.000Z" title="发表于 2023-06-22 02:30:00">2023-06-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-08-30T18:00:49.037Z" title="更新于 2023-08-30 18:00:49">2023-08-30</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vue%E5%89%8D%E7%BD%AE%E5%9F%BA%E7%A1%80/">Vue前置基础</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span data-flag-title="ES6模块化与Webpack入门"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="twikoo_visitors"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><p>vue将每一个组件看作是一个独立的模块 (类似于nodejs中的) 模块化，而组件导入<code>import</code>和导出<code>exports</code>其实使用的是ES6新增的模块化语法</p><p>es6官网模块化语法：<a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/module">https://es6.ruanyifeng.com/#docs/module</a></p><p>谷歌浏览器测试ES6的模块化语法, 必须要使用live-server插件运行index才可以</p><h1 id="1-ES6模块化默认导入导出"><a href="#1-ES6模块化默认导入导出" class="headerlink" title="1. ES6模块化默认导入导出"></a>1. ES6模块化默认导入导出</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 设置script标签type属性为module, 告诉浏览器文件使用了module语法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./1.ES6导入语法.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="1-ES6导入语法-import-xxx-from-‘xxx’"><a href="#1-ES6导入语法-import-xxx-from-‘xxx’" class="headerlink" title="1. ES6导入语法 import xxx from ‘xxx’"></a>1. ES6导入语法 import xxx from ‘xxx’</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 默认导入</span></span><br><span class="line"><span class="comment">// 导入语法会做两件事: 1.执行文件里的代码 2.得到文件里导出的对象</span></span><br><span class="line"><span class="keyword">import</span> data <span class="keyword">from</span> <span class="string">&#x27;./2.ES6导出语法.js&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 这种写法只会做一件事: 执行文件里的代码, 比如只想加载css代码</span></span><br><span class="line"><span class="comment">// import &#x27;./2.ES6导出语法.js&#x27;</span></span><br></pre></td></tr></table></figure><h2 id="2-ES6导出语法-export-default"><a href="#2-ES6导出语法-export-default" class="headerlink" title="2. ES6导出语法 export default {}"></a>2. ES6导出语法 export default {}</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">&#x27;小明&#x27;</span></span><br><span class="line"><span class="keyword">let</span> age = <span class="number">18</span></span><br><span class="line"><span class="keyword">let</span> sex = <span class="string">&#x27;男&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">11</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认导出: export default &#123;&#125;</span></span><br><span class="line"><span class="comment">// 注意点: 默认导出只能导出一次</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;name, age&#125;</span><br></pre></td></tr></table></figure><h2 id="3-ES6按需导入导出"><a href="#3-ES6按需导入导出" class="headerlink" title="3. ES6按需导入导出"></a>3. ES6按需导入导出</h2><ol><li><code>export default</code> 和<code>export</code>可以在同一文件, 但是要分开导入。实际开发中不建议同时使用</li><li>导入通过<code>export</code>导出的模块,名字有要求，如果是export导出，默认导入变量名要与导出的一致</li><li>如果是<code>export default</code>，则变量名可以随便写</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 按需导入需 配套按需导出</span></span><br><span class="line"><span class="comment">// import &#123;变量名 as 别名&#125; from &#x27;文件路径&#x27;</span></span><br><span class="line"><span class="comment">// 按需导入的变量名要和导出变量名一致</span></span><br><span class="line"><span class="comment">// 变量名的 &#123;&#125; 是起解构作用</span></span><br><span class="line"><span class="comment">// 如果非要改名 则需加 as关键字</span></span><br><span class="line"><span class="keyword">import</span> &#123;a, b <span class="keyword">as</span> bb&#125; <span class="keyword">from</span> <span class="string">&#x27;./2.ES6导出语法.js&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, bb)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 按需导出: export let 变量名 = 值</span></span><br><span class="line"><span class="comment">// 注意点: 按需导出可以导出多次</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> a = <span class="string">&#x27;admin&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> b = <span class="string">&#x27;123&#x27;</span></span><br></pre></td></tr></table></figure><hr><h1 id="2-Webpack介绍"><a href="#2-Webpack介绍" class="headerlink" title="2. Webpack介绍"></a>2. Webpack介绍</h1><ol><li>在实际开发中， 项目上线： 前端用webpack把我们项目代码进行打包，然后交给公司后台人员发布到服务器的过程, 官网：<a target="_blank" rel="noopener" href="https://webpack.docschina.org/">https://webpack.docschina.org/</a></li><li><strong>webpack</strong> 是一个用于现代 JavaScript 应用程序的 <em>静态模块打包工具</em></li><li>静态： 项目中的静态资源如css、图片等文件</li><li>模块: js文件（模块化开发中，一切js文件皆为模块）</li><li>打包：主要帮你压缩代码，然后还会加密、混淆代码防止被人偷窥~</li><li>打包还有一个意思： 就是会把你项目中很多个文件压缩成一个文件</li><li>2.webpack作用: 分析、压缩、打包代码</li><li>webpack好处: 减少文件体积、减少文件数量, 提高网页加载速度</li></ol><h1 id="3-Webpack基本使用流程"><a href="#3-Webpack基本使用流程" class="headerlink" title="3. Webpack基本使用流程"></a>3. Webpack基本使用流程</h1><h3 id="1-初始化npm-npm-init-y"><a href="#1-初始化npm-npm-init-y" class="headerlink" title="1. 初始化npm :  npm init -y"></a>1. 初始化npm : npm init -y</h3><p>webpack是node环境中的一个工具类模块，它本身是基于nodejs的</p><h3 id="2-使用node安装webpack"><a href="#2-使用node安装webpack" class="headerlink" title="2. 使用node安装webpack"></a>2. 使用node安装webpack</h3><p>安装命令： <code>npm i webpack webpack-cli -D</code></p><p>-D含义： 相当于 –save-d , 将webpack作为开发依赖</p><p>本地包 ： 不同的项目由于webpack版本不同，比如一些老版本项目可能用最新版的webpack无法打包。 因此不建议将webpack作为全局包安装</p><p>检测是否安装成功: <code>npx webpack -v</code>, 这个命令其实就是检查你的node_module命令下面有没有webpack文件，有的话就读取这个文件里面的版本信息</p><h3 id="3-在src文件夹中新建js文件-模块"><a href="#3-在src文件夹中新建js文件-模块" class="headerlink" title="3. 在src文件夹中新建js文件(模块)"></a>3. 在src文件夹中新建js文件(模块)</h3><p>webpack默认的打包文件入口目录是 <code>./src/index.js</code> , 因此必须要有src这个目录，而且还要有index.js ， 否则就会报错, 这个目录后期可以修改，但是我们需要先了解webapck默认是怎么操作的</p><h3 id="4-在项目根目录下执行打包命令：-npx-webpack"><a href="#4-在项目根目录下执行打包命令：-npx-webpack" class="headerlink" title="4. 在项目根目录下执行打包命令： npx webpack"></a>4. 在项目根目录下执行打包命令： npx webpack</h3><ul><li>1.webpack打包命名全称是: <code>npx webpack js文件路径</code><ul><li>例如: npm webpack .&#x2F;src&#x2F;xxx.js</li><li>如果没有写js文件路径,那么webpack就会自动打包项目根目录下的 <code>./src/index.js</code></li></ul></li><li>2.当项目js代码发生变化时如何打包？<ul><li>重新执行打包命令即可</li></ul></li></ul><p><img src="" data-lazy-src="/image/image_h267TQgT9A.png"></p><ul><li>观察项目变化<ul><li><code>webpack会把打包的js文件默认放入./dist/man.js</code></li></ul></li><li>(1)为什么没有打包tools.js<ul><li>因为index.js文件中并没有去导入tools.js （没有形成依赖关系）</li></ul></li><li>(2)如何才会打包tools.js<ul><li>在index.js中导入tools.js即可</li></ul></li><li>(3)使用commonJS规范导入模块,观察 .&#x2F;dist&#x2F;man.js 变化<ul><li><code>webpack同时支持commonjs模块化规范与ES6模块化规范，所以使用ES6模块化也是可以识别的哟！</code></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_JH2JVjHWtB.png"></p><h2 id="1-5-小结"><a href="#1-5-小结" class="headerlink" title="1.5-小结"></a>1.5-小结</h2><ul><li>1.webpack打包流程分为哪三个步骤<ul><li>初始化npm : npm init -y</li><li>下载安装webpack工具：npm i webpack webpack-cli -D</li><li>开始打包：npx webpack</li></ul></li><li>2.默认webpack打包的<code>入口文件(需要压缩打包的文件)</code>是哪一个？<ul><li>.&#x2F;src&#x2F;index.js</li></ul></li><li>3.默认webpack打包的<code>出口文件（压缩后的文件）</code>是哪一个<ul><li>.&#x2F;dist&#x2F;main.js</li></ul></li><li>4.如何让webpack打包更多的文件<ul><li>在入口文件中,导入其他模块</li><li><code>被打包的资源一定要和入口文件，形成间接或直接的依赖关系</code></li></ul></li><li>5.webpack模块化默认支持哪一种规范？<ul><li>comonJS规范<ul><li>导出使用 <code>module.exports</code></li><li>导入使用<code>require</code></li></ul></li></ul></li></ul><h1 id="04-Webpack配置文件"><a href="#04-Webpack配置文件" class="headerlink" title="04-Webpack配置文件"></a>04-Webpack配置文件</h1><blockquote><p>​ webpack配置文件作用： 修改webpack默认的配置<br>例如，webpack默认的配置如下<br>打包命令： npx webpack<br>入口文件: .&#x2F;src&#x2F;index.js<br>出口文件: .&#x2F;dist&#x2F;main.js<br>通过修改webpack配置文件，可以将上面的一些默认配置全部修改掉。<br>如果把webpack比喻成一个人，那么配置文件就相当于人身上穿的衣服。 不同的人穿衣搭配风格不同。（不同的项目webpack配置是不相同的）</p></blockquote><h2 id="1-1-创建配置文件"><a href="#1-1-创建配置文件" class="headerlink" title="1.1-创建配置文件"></a>1.1-创建配置文件</h2><ul><li>在项目根目录下创建默认配置文件: <code>webpack.config.js</code></li><li>在配置文件中导出配置</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">//自定义配置写在这里（对象键值对）</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="/image/image_P6io3jHemX.png"></p><h2 id="1-2-webpack常见配置作用"><a href="#1-2-webpack常见配置作用" class="headerlink" title="1.2-webpack常见配置作用"></a>1.2-webpack常见配置作用</h2><ul><li>1.mode : 打包模式<ul><li>默认值production : 生产模式（压缩，混淆，加密……. 不可读）</li><li>development :开发模式(代码不会压缩 混淆)</li></ul></li><li>2.output: 出口文件(对象类型)<ul><li>path : 设置出口文件夹（必须是绝对路径）<ul><li>默认值: <code>$&#123;__dirname&#125;/dist</code></li></ul></li><li>filename: 设置出口js文件名 (相对于path路径)<ul><li>默认值: <code>main.js</code></li></ul></li></ul></li><li>3.entry : 出口文件<ul><li>默认值(相当于项目根目录): <code>./src/index.js</code></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_kX0n0Uge8Y.png"></p><h2 id="1-3-webpack其他配置"><a href="#1-3-webpack其他配置" class="headerlink" title="1.3-webpack其他配置"></a>1.3-webpack其他配置</h2><p><strong>注意：这个配置是写在package.json文件中的script对象里面</strong></p><ul><li>“build” : “webpack”<ul><li>相当于是给你的当前项目新增了一个命令: <code>npm run build</code><ul><li>这个命令等价于<code>npx webpack</code>, 只是额外新增了一个命令。 原来的默认命令还是可以用</li></ul></li></ul></li><li><em>“dev”</em>: “webpack –config webpack.dev.js”<ul><li>相当于给你的当前项目新增了一个命令 ： <code>npm run dev</code><ul><li>这个命令将不再使用默认的配置文件webpack.config.js, 而是使用自定义配置文件 webpack.dev.js</li></ul></li></ul></li><li>注意点<ul><li>如果使用<code>npm run build</code> : 还是用默认配置文件来配置你的webpack</li><li>如果使用<code>npm run dev</code> : 就会使用自定义配置文件来配置你的webpack<ul><li>这个命令相当于<code>npx webpack --config webpack.dev.js</code><ul><li>npx webpack –你的配置文件 ： 用自定义配置文件打包webpack</li></ul></li></ul></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_hfcVoxP_nE.png"></p><h2 id="1-4-小节：-npm-run-build-原理流程"><a href="#1-4-小节：-npm-run-build-原理流程" class="headerlink" title="1.4-小节：  npm run build 原理流程"></a>1.4-小节： npm run build 原理流程</h2><p><img src="" data-lazy-src="/image/image_pMk8YDXa5l.png"></p><h1 id="05-Webpack插件与加载器使用"><a href="#05-Webpack插件与加载器使用" class="headerlink" title="05-Webpack插件与加载器使用"></a>05-Webpack插件与加载器使用</h1><blockquote><p>​ 默认情况下, webpack只能处理js或json文件。 但是项目中不仅仅有js文件，还有其他一些资源文件如：css、html、图片等</p></blockquote><ul><li>插件作用 ： 给webpack添加额外的功能<ul><li>加载器（loader） : 让webpack识别编译更多的文件（如css、less、图片等等）<ul><li>webpack中一切文件都是加载器</li></ul></li><li>其他插件（plugin）： 额外功能(如浏览器兼容性)</li></ul></li></ul><h2 id="1-1-处理html文件插件：html-webpack-plugin"><a href="#1-1-处理html文件插件：html-webpack-plugin" class="headerlink" title="1.1-处理html文件插件：html-webpack-plugin"></a>1.1-处理html文件插件：html-webpack-plugin</h2><ul><li>官网：<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/html-webpack-plugin" title="https://www.npmjs.com/package/html-webpack-plugin"><strong>https://www.npmjs.com/package/html-webpack-plugin</strong></a></li><li>1.下载插件: <code>npm i html-webpack-plugin -D</code></li><li>这个插件只是开发用到，发布用不到。 因此一般作为开发依赖</li><li>2.配置插件 ： 两件事<ul><li>在 webpack.config.js中导入插件<ul><li><code>const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)</code></li></ul></li><li>在 plugins中配置插件(不同的插件需要去官网找具体配置项)<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 4.插件配置</span></span><br><span class="line"><span class="attr">plugins</span>: [</span><br><span class="line">       <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123; <span class="comment">// 打包输出HTML</span></span><br><span class="line">            <span class="attr">minify</span>: &#123; <span class="comment">// 压缩HTML文件</span></span><br><span class="line">                <span class="attr">removeComments</span>: <span class="literal">true</span>, <span class="comment">// 移除HTML中的注释</span></span><br><span class="line">                <span class="attr">collapseWhitespace</span>: <span class="literal">true</span>, <span class="comment">// 删除空白符与换行符</span></span><br><span class="line">                <span class="attr">minifyCSS</span>: <span class="literal">true</span><span class="comment">// 压缩内联css</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">template</span>: <span class="string">`./public/index.html`</span> <span class="comment">// 指定压缩哪一个html文件, 相对于根目录</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_xZU0_WgbkT.png"></p><p><img src="" data-lazy-src="/image/image_Qn2la8RdhH.png"></p><h2 id="1-2-处理css文件加载器"><a href="#1-2-处理css文件加载器" class="headerlink" title="1.2-处理css文件加载器"></a>1.2-处理css文件加载器</h2><h3 id="1-2-1-前置知识储备：css文件模块化语法"><a href="#1-2-1-前置知识储备：css文件模块化语法" class="headerlink" title="1.2.1-前置知识储备：css文件模块化语法"></a>1.2.1-前置知识储备：css文件模块化语法</h3><blockquote><p>​ 前置知识点 : 之前都是通过link标签的href属性来导入css文件，那么在模块化语法中如何导入css呢</p></blockquote><ul><li>在一个css文件中导入另一个css文件（与less导入语法类似）<ul><li><code>@import &quot;css文件名&quot;;</code><ul><li>特别注意后面那个分号哟，那是css的语法规范</li></ul></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_RmAtNer4k8.png"></p><ul><li>在js文件中导入css文件<ul><li><code>improt &quot;css文件名&quot;</code><ul><li><strong>后期vue项目也是用这种语法在js文件中导入css哟：</strong><a target="_blank" rel="noopener" href="https://element.eleme.cn/#/zh-CN/component/quickstart#wan-zheng-yin-ru" title="https://element.eleme.cn/#/zh-CN/component/quickstart#wan-zheng-yin-ru"><strong>https://element.eleme.cn/#/zh-CN/component/quickstart#wan-zheng-yin-ru</strong></a></li></ul></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_XpRudIA7d0.png"></p><h3 id="1-2-2-下载插件"><a href="#1-2-2-下载插件" class="headerlink" title="1.2.2-下载插件"></a>1.2.2-下载插件</h3><ul><li><code>npm i css-loader -D</code><ul><li>开发依赖： 这个插件是让webpack可以识别css文件（因为webpack默认只识别js文件）</li></ul></li><li><code>npm i style-loader -D</code><ul><li>开发依赖：这个插件是让webpack在打包的时候，把样式插入到html文件中</li></ul></li><li>简单的说： css-loader是为了webpack能够识别并打包css文件的， style-loader是为了能让你的css文件最终在html中渲染的（底层是在html文件的head中生成style把样式插入进去）</li></ul><h3 id="1-2-3-配置插件"><a href="#1-2-3-配置插件" class="headerlink" title="1.2.3-配置插件"></a>1.2.3-配置插件</h3><blockquote><p>​ webpack中大多数插件都是要在配置文件中，配置之后才会生效的哟！<br>官网地址：<a target="_blank" rel="noopener" href="https://webpack.docschina.org/loaders/css-loader/" title="https://webpack.docschina.org/loaders/css-loader/">https://webpack.docschina.org/loaders/css-loader/</a></p></blockquote><ul><li>在webpack.config.json中配置css插件</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 5.加载器</span></span><br><span class="line"><span class="attr">module</span>:&#123; <span class="comment">// 处理非js模块</span></span><br><span class="line">    <span class="attr">rules</span>:[ <span class="comment">// 规则</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,     <span class="comment">// 正则测试</span></span><br><span class="line">        <span class="attr">use</span>: [<span class="string">&#x27;style-loader&#x27;</span>,<span class="string">&#x27;css-loader&#x27;</span>]   <span class="comment">// loader</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="/image/image_C28IxueqoE.png"></p><h2 id="1-3-处理less文件加载器"><a href="#1-3-处理less文件加载器" class="headerlink" title="1.3-处理less文件加载器"></a>1.3-处理less文件加载器</h2><blockquote><p>​ 在实际开发中，并不是所有的项目样式都会用css语法来写的。 有的项目会用less语法来写样式。 而且这种场景也是很多的。</p></blockquote><ul><li>官网：<a target="_blank" rel="noopener" href="https://webpack.docschina.org/loaders/less-loader/" title="https://webpack.docschina.org/loaders/less-loader/">https://webpack.docschina.org/loaders/less-loader/</a></li><li>1.下载插件： <code>npm i less-loader less -D</code><ul><li>开发依赖： 这个命令其实是一次性下载两个插件<ul><li>less插件：把你的less语法转成css语法<ul><li>相当于之前vscode那个easyless插件作用</li></ul></li><li>less-loader插件：让webpack可以识别less文件</li></ul></li></ul></li><li>2.配置插件(注意书写位置，别写错位置了哈。写在刚才css加载器配置下面)</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,     <span class="comment">// 正则匹配，以.less结尾的文件</span></span><br><span class="line">    <span class="comment">// 如果发现是.less文件，则由如下三个loader来处理</span></span><br><span class="line">    <span class="comment">// 处理的顺序是   从右向左</span></span><br><span class="line">    <span class="comment">// less-loader: 作用是加载less文件，会帮你less转成css</span></span><br><span class="line">    <span class="comment">// css-loader: 作用是允许.js中引入.css</span></span><br><span class="line">    <span class="comment">// style-loader:作用是在.html上创建style标签，把css代码输入进去</span></span><br><span class="line">    <span class="attr">use</span>: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>, <span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 匹配成功，使用指定的loader</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="/image/image_649N9WQywK.png"></p><ul><li>3.自己随便写个less文件测试一下吧。<ul><li><strong>记得把index.js、index.less里面导包的之后，之前那个css后缀改成less后缀哟</strong></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_L_bn6MfR2B.png"></p><h2 id="1-4-处理图片文件加载器-webpack自带"><a href="#1-4-处理图片文件加载器-webpack自带" class="headerlink" title="1.4-处理图片文件加载器(webpack自带)"></a>1.4-处理图片文件加载器(webpack自带)</h2><h3 id="1-4-1-处理文件文件配置"><a href="#1-4-1-处理文件文件配置" class="headerlink" title="1.4.1-处理文件文件配置"></a>1.4.1-处理文件文件配置</h3><ul><li>处理图片资源，webpack老版本需要装插件， 新版本自带插件(5之后版本)，无需安装<ul><li>官网介绍：<a target="_blank" rel="noopener" href="https://webpack.docschina.org/guides/asset-modules/" title="https://webpack.docschina.org/guides/asset-modules/">https://webpack.docschina.org/guides/asset-modules/</a></li></ul></li><li>在配置文件中配置图片文件<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|gif|jpeg)$/i</span>, <span class="comment">// 匹配图片文件</span></span><br><span class="line">    <span class="attr">type</span>: <span class="string">&#x27;asset&#x27;</span> <span class="comment">// 在导出一个 data URI 和一个单独的文件之间自动选择</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li></ul><p><img src="" data-lazy-src="/image/image_YnWjpwL6a4.png"></p><h3 id="1-4-2-前置知识储备：-模块化语法如何使用图片"><a href="#1-4-2-前置知识储备：-模块化语法如何使用图片" class="headerlink" title="1.4.2-前置知识储备： 模块化语法如何使用图片"></a>1.4.2-前置知识储备： 模块化语法如何使用图片</h3><blockquote><p>​ 页面的图片文件有两种加载模式<br>第一种： 作为css样式背景图<br>第二种：作为img标签的src属性</p></blockquote><p><img src="" data-lazy-src="/image/image_z_ry8m8MZ6.png"></p><ul><li>模块化导入图片<ul><li>import 变量名 from ‘图片路径’<ul><li>这个原理有点类似于之前ajax讲过的文件预览，先将图片文件生成一个本地url，然后显示到img标签上</li></ul></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_76VNJvMzS5.png"></p><h3 id="1-4-3-图片压缩规则"><a href="#1-4-3-图片压缩规则" class="headerlink" title="1.4.3-图片压缩规则"></a>1.4.3-图片压缩规则</h3><p><img src="" data-lazy-src="/image/image_yCcZnmPzMQ.png"></p><ul><li>给页面添加两个img标签，分别导入两张图片（一大一小，然后观察页面）</li></ul><p><img src="" data-lazy-src="/image/image_g5gdXtiuRE.png"></p><h2 id="1-5-其他插件与加载器-课后了解"><a href="#1-5-其他插件与加载器-课后了解" class="headerlink" title="1.5-其他插件与加载器(课后了解)"></a>1.5-其他插件与加载器(课后了解)</h2><h3 id="1-5-1-自动清理目录插件"><a href="#1-5-1-自动清理目录插件" class="headerlink" title="1.5.1-自动清理目录插件"></a>1.5.1-自动清理目录插件</h3><ul><li>1.自动清理目录插件：clean-webpack-plugin<ul><li>作用描述： 每一次我们打包的之后，因为上一次打包页面看着不舒服。 喜欢把之前的文件给删掉。 这样就可以确保本次打包一定是最新的打包文件。<ul><li>这个插件就是每一次打包的时候自动帮你清理上一次打包的文件目录（用起来之后，我们看不到实际变化，就是一个心理作用。 它帮你把之前打包的文件先删除了，然后再生成本次打包文件）</li></ul></li></ul></li><li>2.安装：<code>npm i clean-webpack-plugin -D</code></li><li>3.配置(webpack.config.js)<ul><li>先导入: <code>const &#123; CleanWebpackPlugin &#125; = require(&#39;clean-webpack-plugin&#39;)</code></li><li>在plugins配置<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">plugins</span>:[</span><br><span class="line">   <span class="keyword">new</span> <span class="title class_">CleanWebpackPlugin</span>()，</span><br><span class="line">]</span><br></pre></td></tr></table></figure></li></ul></li></ul><h3 id="1-5-2-字体图标-自带插件-配置即可"><a href="#1-5-2-字体图标-自带插件-配置即可" class="headerlink" title="1.5.2-字体图标(自带插件,配置即可)"></a>1.5.2-字体图标(自带插件,配置即可)</h3><ul><li>这是webpack自带插件（跟图片文件差不多）：<ul><li><strong>官网：</strong><a target="_blank" rel="noopener" href="https://www.webpackjs.com/loaders/less-loader/#%E5%AE%89%E8%A3%85" title="https://www.webpackjs.com/loaders/less-loader/#%E5%AE%89%E8%A3%85"><strong>https://www.webpackjs.com/loaders/less-loader/#%E5%AE%89%E8%A3%85</strong></a></li></ul></li></ul><p><img src="" data-lazy-src="/image/image_0aqL-TdscT.png"></p><h1 id="06-webpack服务器开发"><a href="#06-webpack服务器开发" class="headerlink" title="06-webpack服务器开发"></a>06-webpack服务器开发</h1><blockquote><p>大家有没有发现： 我们每一次修改代码，都需要重新打包才能看到效果？<br>​ 类似于前端：每一次修改代码，都需要重新刷新页面才能生效<br>​ 类似于nodejs:每一次修改代码，都需要重新执行node命令才能生效<br>那么webpack有没有那种，一敲代码自动打包的工具呢？<br>​ 类似于前端live-server : 一敲代码，页面自动更新<br>​ 类似于nodejs的nodemon : 一敲代码，自动重启服务器<br>那必须有啊！！！</p></blockquote><ul><li>webpack-dev-server配置文档: <a target="_blank" rel="noopener" href="https://webpack.docschina.org/configuration/dev-server/#devserverafter" title="https://webpack.docschina.org/configuration/dev-server/#devserverafter">https://webpack.docschina.org/configuration/dev-server/#devserverafter</a></li><li>1.安装插件：<code>npm i webpack-dev-server -D</code></li><li>2.配置插件</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&#x27;127.0.0.1&#x27;</span>,  <span class="comment">// 配置启动ip地址</span></span><br><span class="line">    <span class="attr">port</span>: <span class="number">3000</span>,  <span class="comment">// 配置端口</span></span><br><span class="line">    <span class="attr">open</span>: <span class="literal">true</span>  <span class="comment">// 配置是否自动打开浏览器</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="/image/image_eZMj5EH0nC.png"></p><ul><li>3.配置package.json文件</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack-dev-server&quot;</span>,  </span><br><span class="line">   <span class="comment">// 它默认会找webpack.config.js文件</span></span><br><span class="line">   </span><br><span class="line">   <span class="string">&quot;build&quot;</span>: <span class="string">&quot;webpack-dev-server --config  webpack.config.js&quot;</span> </span><br><span class="line">    <span class="comment">// 指定使用webpack.config.js配置文件文件</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><ul><li>4.启动服务器: <code>npm run dev</code><ul><li><code>webpack实时打包、实时编译、实时浏览器查看效果，一条龙服务到位</code></li></ul></li></ul><h1 id="webpack学习总结-面试题"><a href="#webpack学习总结-面试题" class="headerlink" title="webpack学习总结(面试题)"></a>webpack学习总结(面试题)</h1><ul><li>1.什么是webpack<ul><li><em>静态模块打包工具</em></li></ul></li><li>2.webpack作用<ul><li>分析、压缩、打包代码</li></ul></li><li>3.webpack好处<ul><li>减少文件体积、减少文件数量</li><li>提高网页加载速度</li></ul></li><li>4.webpack工作流程<ul><li>1.初始化参数：从配置文件读取与合并参数，得出最终的参数</li><li>2.开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，开始执行编译</li><li>3.确定入口：根据配置中的 entry 找出所有的入口文件</li><li>4.编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理</li><li>5.完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系</li><li>6.输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会</li><li>7。输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。</li></ul></li><li>5.什么是loader，什么是Plugin<ul><li>loader直译为”加载器”。webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。<ul><li>说人话： loader就是用于解析文件的<ul><li>例如：css-loader 、style-loader、image-loader</li></ul></li></ul></li><li>Plugin直译为”插件”。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。<ul><li>说人话：插件就是拓展功能的<ul><li>例如：html-webpack-plugin,</li></ul></li></ul></li></ul></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,     <span class="comment">// 正则匹配，以.less结尾的文件</span></span><br><span class="line">    <span class="comment">// 如果发现是.less文件，则由如下三个loader来处理</span></span><br><span class="line">    <span class="comment">// 处理的顺序是   从右向左</span></span><br><span class="line">    <span class="comment">// less-loader: 作用是加载less文件，会帮你less转成css</span></span><br><span class="line">    <span class="comment">// css-loader: 作用是允许.js中引入.css</span></span><br><span class="line">    <span class="comment">// style-loader:作用是在.html上创建style标签，把css代码输入进去</span></span><br><span class="line">    <span class="attr">use</span>: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>, <span class="string">&#x27;less-loader&#x27;</span>] <span class="comment">// 匹配成功，使用指定的loader</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">本文作者:</span> <span class="post-copyright-info"><a href="https://webxc.eu.org">XC's Blog</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">本文链接:</span> <span class="post-copyright-info"><a href="https://webxc.eu.org/post/fe15/">https://webxc.eu.org/post/fe15/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明:</span> <span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://webxc.eu.org" target="_blank">XC's Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue%E5%89%8D%E7%BD%AE%E5%9F%BA%E7%A1%80/">Vue前置基础</a></div><div class="post_share"><div class="social-share" data-image="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/webpack.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://npm.elemecdn.com/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://npm.elemecdn.com/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.png" target="_blank"><img class="post-qr-code-img" src="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.png" alt="Wechat"></a><div class="post-qr-code-desc">Wechat</div></li><li class="reward-item"><a href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="https://npm.elemecdn.com/webxc@1.0.0/lxfs/alipay.jpg" alt="Alipay"></a><div class="post-qr-code-desc">Alipay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/post/fe11/"><img class="prev-cover" src="https://npm.elemecdn.com/webxc/cover/js1.webp" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇文章</div><div class="prev_info">Vue前置JS功底</div></div></a></div><div class="next-post pull-right"><a href="/post/fn32/"><img class="next-cover" src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇文章</div><div class="next_info">Vue框架笔记</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/post/fe11/" title="Vue前置JS功底"><img class="cover" src="https://npm.elemecdn.com/webxc/cover/js1.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-06-21</div><div class="title">Vue前置JS功底</div></div></a></div><div><a href="/post/fs68/" title="Node.js的基本使用"><img class="cover" src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/nodejslogo.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-06-18</div><div class="title">Node.js的基本使用</div></div></a></div><div><a href="/post/fr23/" title="NPM的基本使用"><img class="cover" src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/npmlogo.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-06-19</div><div class="title">NPM的基本使用</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="avatar"></div><div class="author-info__name">XC's Blog</div><div class="author-info__description">XC's Blog 记录生活和学习文章</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">95</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://tenapi.cn/qqzlk/?qq=2848141597" target="_blank" title="QQ"><i class="iconfont icon-QQ"></i></a><a class="social-icon" href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.jpg" target="_blank" title="微信"><i class="iconfont icon-weixin"></i></a><a class="social-icon" href="https://github.com/web-xc" target="_blank" title="Github"><i class="iconfont icon-github"></i></a><a class="social-icon" href="https://space.bilibili.com/2134826455" target="_blank" title="BiliBili"><i class="iconfont icon-bilibili"></i></a><a class="social-icon" href="https://music.163.com/#/user/home?id=323682437" target="_blank" title="网易云音乐"><i class="iconfont icon-wyy"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">原网站因使用.ml域名被回收, 再加上本人因学习原因, 没怎么打理博客, 使用了https://webxc.eu.org域名来维持博客运行, 如果有加友联的朋友们, 去友联页看信息即可, 如果原来有加过的, 麻烦在原来域名后缀改一下(.ml ==> .eu.org)就行, 博客写的太乱了, 没时间打理, 兄弟们谅解😁😁~~</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-ES6%E6%A8%A1%E5%9D%97%E5%8C%96%E9%BB%98%E8%AE%A4%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA"><span class="toc-number">1.</span> <span class="toc-text">1. ES6模块化默认导入导出</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-ES6%E5%AF%BC%E5%85%A5%E8%AF%AD%E6%B3%95-import-xxx-from-%E2%80%98xxx%E2%80%99"><span class="toc-number">1.1.</span> <span class="toc-text">1. ES6导入语法 import xxx from ‘xxx’</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-ES6%E5%AF%BC%E5%87%BA%E8%AF%AD%E6%B3%95-export-default"><span class="toc-number">1.2.</span> <span class="toc-text">2. ES6导出语法 export default {}</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-ES6%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA"><span class="toc-number">1.3.</span> <span class="toc-text">3. ES6按需导入导出</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-Webpack%E4%BB%8B%E7%BB%8D"><span class="toc-number">2.</span> <span class="toc-text">2. Webpack介绍</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-Webpack%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B"><span class="toc-number">3.</span> <span class="toc-text">3. Webpack基本使用流程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%88%9D%E5%A7%8B%E5%8C%96npm-npm-init-y"><span class="toc-number">3.0.1.</span> <span class="toc-text">1. 初始化npm : npm init -y</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BD%BF%E7%94%A8node%E5%AE%89%E8%A3%85webpack"><span class="toc-number">3.0.2.</span> <span class="toc-text">2. 使用node安装webpack</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%9C%A8src%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%AD%E6%96%B0%E5%BB%BAjs%E6%96%87%E4%BB%B6-%E6%A8%A1%E5%9D%97"><span class="toc-number">3.0.3.</span> <span class="toc-text">3. 在src文件夹中新建js文件(模块)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%9C%A8%E9%A1%B9%E7%9B%AE%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%89%A7%E8%A1%8C%E6%89%93%E5%8C%85%E5%91%BD%E4%BB%A4%EF%BC%9A-npx-webpack"><span class="toc-number">3.0.4.</span> <span class="toc-text">4. 在项目根目录下执行打包命令： npx webpack</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-5-%E5%B0%8F%E7%BB%93"><span class="toc-number">3.1.</span> <span class="toc-text">1.5-小结</span></a></li></ol><li class="toc-item toc-level-1"><a class="toc-link" href="#04-Webpack%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">4.</span> <span class="toc-text">04-Webpack配置文件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-1-%E5%88%9B%E5%BB%BA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">4.1.</span> <span class="toc-text">1.1-创建配置文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-2-webpack%E5%B8%B8%E8%A7%81%E9%85%8D%E7%BD%AE%E4%BD%9C%E7%94%A8"><span class="toc-number">4.2.</span> <span class="toc-text">1.2-webpack常见配置作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-3-webpack%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE"><span class="toc-number">4.3.</span> <span class="toc-text">1.3-webpack其他配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-4-%E5%B0%8F%E8%8A%82%EF%BC%9A-npm-run-build-%E5%8E%9F%E7%90%86%E6%B5%81%E7%A8%8B"><span class="toc-number">4.4.</span> <span class="toc-text">1.4-小节： npm run build 原理流程</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#05-Webpack%E6%8F%92%E4%BB%B6%E4%B8%8E%E5%8A%A0%E8%BD%BD%E5%99%A8%E4%BD%BF%E7%94%A8"><span class="toc-number">5.</span> <span class="toc-text">05-Webpack插件与加载器使用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-1-%E5%A4%84%E7%90%86html%E6%96%87%E4%BB%B6%E6%8F%92%E4%BB%B6%EF%BC%9Ahtml-webpack-plugin"><span class="toc-number">5.1.</span> <span class="toc-text">1.1-处理html文件插件：html-webpack-plugin</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-2-%E5%A4%84%E7%90%86css%E6%96%87%E4%BB%B6%E5%8A%A0%E8%BD%BD%E5%99%A8"><span class="toc-number">5.2.</span> <span class="toc-text">1.2-处理css文件加载器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-1-%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%87%EF%BC%9Acss%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97%E5%8C%96%E8%AF%AD%E6%B3%95"><span class="toc-number">5.2.1.</span> <span class="toc-text">1.2.1-前置知识储备：css文件模块化语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-2-%E4%B8%8B%E8%BD%BD%E6%8F%92%E4%BB%B6"><span class="toc-number">5.2.2.</span> <span class="toc-text">1.2.2-下载插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-3-%E9%85%8D%E7%BD%AE%E6%8F%92%E4%BB%B6"><span class="toc-number">5.2.3.</span> <span class="toc-text">1.2.3-配置插件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-3-%E5%A4%84%E7%90%86less%E6%96%87%E4%BB%B6%E5%8A%A0%E8%BD%BD%E5%99%A8"><span class="toc-number">5.3.</span> <span class="toc-text">1.3-处理less文件加载器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-4-%E5%A4%84%E7%90%86%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E5%8A%A0%E8%BD%BD%E5%99%A8-webpack%E8%87%AA%E5%B8%A6"><span class="toc-number">5.4.</span> <span class="toc-text">1.4-处理图片文件加载器(webpack自带)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-1-%E5%A4%84%E7%90%86%E6%96%87%E4%BB%B6%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE"><span class="toc-number">5.4.1.</span> <span class="toc-text">1.4.1-处理文件文件配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-2-%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%87%EF%BC%9A-%E6%A8%A1%E5%9D%97%E5%8C%96%E8%AF%AD%E6%B3%95%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%9B%BE%E7%89%87"><span class="toc-number">5.4.2.</span> <span class="toc-text">1.4.2-前置知识储备： 模块化语法如何使用图片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-3-%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%E8%A7%84%E5%88%99"><span class="toc-number">5.4.3.</span> <span class="toc-text">1.4.3-图片压缩规则</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-5-%E5%85%B6%E4%BB%96%E6%8F%92%E4%BB%B6%E4%B8%8E%E5%8A%A0%E8%BD%BD%E5%99%A8-%E8%AF%BE%E5%90%8E%E4%BA%86%E8%A7%A3"><span class="toc-number">5.5.</span> <span class="toc-text">1.5-其他插件与加载器(课后了解)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-5-1-%E8%87%AA%E5%8A%A8%E6%B8%85%E7%90%86%E7%9B%AE%E5%BD%95%E6%8F%92%E4%BB%B6"><span class="toc-number">5.5.1.</span> <span class="toc-text">1.5.1-自动清理目录插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-5-2-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87-%E8%87%AA%E5%B8%A6%E6%8F%92%E4%BB%B6-%E9%85%8D%E7%BD%AE%E5%8D%B3%E5%8F%AF"><span class="toc-number">5.5.2.</span> <span class="toc-text">1.5.2-字体图标(自带插件,配置即可)</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#06-webpack%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%BC%80%E5%8F%91"><span class="toc-number">6.</span> <span class="toc-text">06-webpack服务器开发</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#webpack%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93-%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">7.</span> <span class="toc-text">webpack学习总结(面试题)</span></a></li></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/post/ds2s/" title="整个前端面试题"><img src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="整个前端面试题"></a><div class="content"><a class="title" href="/post/ds2s/" title="整个前端面试题">整个前端面试题</a><time datetime="2023-08-31T02:00:00.000Z" title="发表于 2023-08-31 02:00:00">2023-08-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/ds23/" title="常见前端面试题"><img src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="常见前端面试题"></a><div class="content"><a class="title" href="/post/ds23/" title="常见前端面试题">常见前端面试题</a><time datetime="2023-08-28T18:30:00.000Z" title="发表于 2023-08-28 18:30:00">2023-08-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/fe33/" title="硅谷甄选运营平台"><img src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="硅谷甄选运营平台"></a><div class="content"><a class="title" href="/post/fe33/" title="硅谷甄选运营平台">硅谷甄选运营平台</a><time datetime="2023-07-26T03:55:00.000Z" title="发表于 2023-07-26 03:55:00">2023-07-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2023 By XC's Blog</div><div class="framework-info"><span></span> <a target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20235221">萌ICP备20235221号</a><span class="footer-separator">|</span><span></span> <a target="_blank" rel="noopener" href="https://icp.gov.moe/">萌ICP查询</a><div id="running-time"></div></div><script>setInterval((()=>{let e=Math.round(new Date("2021-11-21 01:35:06").getTime()/1e3),t=Math.round(((new Date).getTime()+288e5)/1e3)-e,n=new Array(0,0,0,0,0);t>=31536e3&&(n[0]=parseInt(t/31536e3),t%=31536e3),t>=86400&&(n[1]=parseInt(t/86400),t%=86400),t>=3600&&(n[2]=parseInt(t/3600),t%=3600),t>=60&&(n[3]=parseInt(t/60),t%=60),t>0&&(n[4]=t),currentTimeHtml="本站已安全运行 "+n[0]+" 年 "+n[1]+" 天 "+n[2]+" 时 "+n[3]+" 分 "+n[4]+" 秒",document.getElementById("running-time").innerHTML=currentTimeHtml}),1e3)</script></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0<span>%</span></span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight,500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i> <span>正在载入文件,请稍后</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"></div></div><hr><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="https://npm.elemecdn.com/hexo-theme-butterfly/source/js/utils.js"></script><script src="https://npm.elemecdn.com/hexo-theme-butterfly@4.4.0/source/js/main.js"></script><script src="https://npm.elemecdn.com/@fancyapps/ui/dist/fancybox.umd.js"></script><script src="https://npm.elemecdn.com/instant.page/instantpage.js" type="module"></script><script src="https://npm.elemecdn.com/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://npm.elemecdn.com/node-snackbar/dist/snackbar.min.js"></script><script src="https://npm.elemecdn.com/hexo-theme-butterfly/source/js/search/local-search.js"></script><div class="js-pjax"><script>(()=>{const e=document.querySelectorAll("#article-container .mermaid-wrap");if(e.length){window.runMermaid=()=>{window.loadMermaid=!0;const t="dark"===document.documentElement.getAttribute("data-theme")?"dark":"default";Array.from(e).forEach(((e,n)=>{const d=e.firstElementChild,r="mermaid-"+n,m="%%{init:{ 'theme':'"+t+"'}}%%\n"+d.textContent;mermaid.mermaidAPI.render(r,m,(e=>{d.insertAdjacentHTML("afterend",e)}))}))};const t=()=>{window.loadMermaid?runMermaid():getScript("https://npm.elemecdn.com/mermaid/dist/mermaid.min.js").then(runMermaid)};window.pjax?t():document.addEventListener("DOMContentLoaded",t)}})()</script><script>(()=>{const o=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://blog2.webxc.eu.org/",region:"",onCommentLoaded:function(){btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))},t=()=>{"object"!=typeof twikoo?getScript("https://npm.elemecdn.com/twikoo@1.6.16/dist/twikoo.all.min.js").then(o):setTimeout(o,0)};t()})()</script></div><script data-pjax="false" defer src="https://npm.elemecdn.com/webxc@1.0.16/css/style.js"></script><script defer src="https://npm.elemecdn.com/hexo-theme-butterfly@4.4.0/source/js/search/local-search.js"></scrip><script src="https://npm.elemecdn.com/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!0,POWERMODE.mobile=!0,document.body.addEventListener("input",POWERMODE)</script><script src="https://npm.elemecdn.com/pjax@0.2.8/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax",".tk-comments-container"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(window.tocScrollFn&&window.removeEventListener("scroll",window.tocScrollFn),window.scrollCollect&&window.removeEventListener("scroll",scrollCollect),"object"==typeof preloader&&preloader.initLoading(),document.getElementById("rightside").style.cssText="opacity: ''; transform: ''",window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),"object"==typeof disqusjs&&disqusjs.destroy()})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll(),"object"==typeof preloader&&preloader.endLoading()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script data-pjax>function butterfly_swiper_injector_config(){var s=document.getElementById("recent-posts");console.log("已挂载butterfly_swiper"),s.insertAdjacentHTML("afterbegin",'<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-08-31</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/ds2s/&quot;);" href="javascript:void(0);" alt="">整个前端面试题</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-08-28</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/ds23/&quot;);" href="javascript:void(0);" alt="">常见前端面试题</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-26</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fe33/&quot;);" href="javascript:void(0);" alt="">硅谷甄选运营平台</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-17</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/ew32/&quot;);" href="javascript:void(0);" alt="">Vue第三天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-16</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/aw92/&quot;);" href="javascript:void(0);" alt="">Vue第二天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-14</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/ou67/&quot;);" href="javascript:void(0);" alt="">Vue第一天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-05</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fn32/&quot;);" href="javascript:void(0);" alt="">Vue框架笔记</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-06-21</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fe11/&quot;);" href="javascript:void(0);" alt="">Vue前置JS功底</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/promise.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-06-11</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/pr67/&quot;);" href="javascript:void(0);" alt="">ES6-Promise语法与原理</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/ajax.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-06-08</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/or01/&quot;);" href="javascript:void(0);" alt="">Ajax第四天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/ajax.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-06-07</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fs67/&quot;);" href="javascript:void(0);" alt="">Ajax第三天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-05-11</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fe66/&quot;);" href="javascript:void(0);" alt="">JS进阶第四天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-05-10</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fe99/&quot;);" href="javascript:void(0);" alt="">JS进阶第三天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-05-05</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/us87/&quot;);" href="javascript:void(0);" alt="">JS进阶第二天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover15.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-10-31</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/2db5/&quot;);" href="javascript:void(0);" alt="">移动开发-Flex布局</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover16.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-11-14</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/1c7e/&quot;);" href="javascript:void(0);" alt="">移动开发-媒体查询</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover17.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-11-17</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/7fc/&quot;);" href="javascript:void(0);" alt="">移动开发-响应式</a><div class="blog-slider__text">点击查看</div></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>')}for(var elist="null".split(","),cpage=location.pathname,epage="all",flag=0,i=0;i<elist.length;i++)cpage.includes(elist[i])&&flag++;("all"===epage&&0==flag||epage===cpage)&&butterfly_swiper_injector_config()</script><script defer src="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper_init.js"></script></body></html>